<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px">
      <div class="import">
        <div class="upload-demo">
          <el-upload
            action=""
            :http-request="handleImport"
            :on-change="handleChange"
          >
            <el-button type="primary" plain ref="import"> 上传文件 </el-button>
          </el-upload>
        </div>

        <div class="text">
          <p>
            <span>没有模板？</span>
            <span class="clk">点击</span>
            <span class="btn" @click="handleDownload()">下载模板</span>
          </p>
        </div>
        <div class="text">
          <p>
            <span>查看导入失败数据？</span>
            <span class="clk">点击</span>
            <span
              :class="errorTxt == '' ? 'dis' : 'btn'"
              @click="handleDownloadError()"
              >下载数据</span
            >
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <DownloadStr />
  </div>
</template>
<script>
import {
  sysCourseSourceImport,
  eduTeachingImport,
  tbSysDeptImport,
  tbSysUserImport
} from "@/api/importData";
export default {
  components: {
    DownloadStr: () => import("../resource/downloadStr.vue"),
  },
  data() {
    return {
      title: "导入",
      dialogVisible: false,
      templatePort: "", //模板接口
      fileTemp: "",
      busEmit: "",
      errorTxt: "",
    };
  },
  props: {
    type: {
      type: String,
      default: "course",
    },
  },
  mounted() {
    //导入校本资源
    if (this.type == "course") {
      this.templatePort = "/sysCourseSource/down";
      this.busEmit = "refreshCourseSourceList";
    }
    //导入教学班次
    if (this.type == "teaching") {
      this.templatePort = "/eduTeaching/down";
      this.busEmit = "refreshTeachingClassList";
    }
    //导入校区部门
    if (this.type == "unit") {
      this.templatePort = "/tbSysDept/down";
      this.busEmit = "refreshUnitList";
    }
    //导入用户
    if (this.type == "user") {
      this.templatePort = "/tbSysUser/down";
      this.busEmit = "refreshUserList";
    }
    this.$bus.$on("showDialogScoreRuleAdd", this.init);
  },
  beforeDestroy() {
    this.$bus.$off("showDialogScoreRuleAdd");
  },
  methods: {
    //显示弹窗
    init() {
      this.errorTxt = "";
      this.dialogVisible = true;
    },
    //下载模板
    handleDownload() {
      window.location.href = this.baseURL + this.templatePort;
    },
    handleDownloadError() {
      if (this.errorTxt == "") return;
      let name = "数据校验.txt";
      this.$bus.$emit("downloadStr", name, this.errorTxt);
    },
    //导入数据
    handleImport() {
      let formdata = new FormData();
      formdata.append("file", this.fileTemp);
      if (this.type == "course") {
        sysCourseSourceImport(formdata).then((res) => {
          this.handleResult(res);
        });
      }
      if (this.type == "teaching") {
        eduTeachingImport(formdata).then((res) => {
          this.handleResult(res);
        });
      }
      if (this.type == "unit") {
        tbSysDeptImport(formdata).then((res) => {
          this.handleResult(res);
        });
      }
      if (this.type == "user") {
        tbSysUserImport(formdata).then((res) => {
          this.handleResult(res);
        });
      }
    },
    handleResult(res) {
      let errorData = res.data.data[0].errorData;
      if (errorData.length) {
        let htmls = "";
        this.errorTxt = "";
        errorData.forEach((v) => {
          htmls += `<p>${v}</p>`;
          this.errorTxt += v + "\r\n";
        });
        this.$message({
          type: "warning",
          duration: 10000,
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: htmls,
        });
      } else {
        this.$bus.$emit(this.busEmit);
        this.$message({
          message: "导入成功",
          type: "success",
        });
      }
    },
    handleChange(file) {
      this.fileTemp = file.raw;
    },
  },
};
</script>
<style scoped>
.import {
  min-height: 200px;
}
.upload-demo {
  float: left;
  width: 98px;
  height: 40px;
  overflow: hidden;
  margin-right: 10px;
}
.text {
  float: left;
  line-height: 40px;
  margin-left: 60px;
}
.text .clk {
  padding-left: 20px;
  background: url("~@/assets/icon05.png") no-repeat left center;
}
.text .btn {
  color: #005ebb;
  cursor: pointer;
  border-bottom: 1px solid #005ebb;
}
.text .dis {
  color: #c0c4cc;
  cursor: not-allowed;
  border-bottom: 1px solid #c0c4cc;
}
</style>